<template>
    <view class="form-container">
        <view class="form-box">
            <block v-for="(item, index) in formData" :key="item.rules.name">
                <view class="form-item flex-row--c">
                    <!-- 单行文本框 -->
                    <view v-if="['text', 'password', 'number', 'code'].includes(item.type)" class="line">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'">
                            <text v-if="item.rules.verify" class="colorRed"> * </text>
                            <text v-if="num" class="num"> {{ index + 1 }}. </text>
                            {{ item.label }}
                        </view>
                        <!-- 发送验证码 -->
                        <view v-if="item.type === 'code'" class="line-right send-code-box">
                            <input
                                v-model="item.rules.value"
                                :type="item.type"
                                class="input"
                                placeholder-class="plaClass"
                                :placeholder="item.placeholder"
                                @input="inputVal(index)"
                            />
                            <view style="width: 250rpx">
                                <u-button
                                    size="mini"
                                    type="primary"
                                    :disabled="item.disabled || isSend"
                                    @click="sendCode(item)"
                                >
                                    {{ codeFont }}
                                </u-button>
                            </view>
                        </view>
                        <!-- 普通输入框 -->
                        <view v-else class="line-right">
                            <input
                                v-model="item.rules.value"
                                :type="item.type"
                                class="input"
                                placeholder-class="plaClass"
                                :placeholder="item.placeholder"
                                :disabled="item.disabled"
                                @input="inputVal(index)"
                            />
                        </view>
                    </view>
                    <!-- 下拉选择-->
                    <view v-else-if="['select', 'time'].includes(item.type)" class="line">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'">
                            <text v-if="item.rules.verify" class="colorRed"> * </text>
                            <text v-if="num" class="num"> {{ index + 1 }}. </text>
                            {{ item.label }}
                        </view>
                        <view class="line-right">
                            <input
                                v-model="item.rules.label"
                                disabled
                                type="text"
                                class="input"
                                placeholder-class="plaClass"
                                :placeholder="item.placeholder"
                                @click="item.show = true"
                            />
                            <view class="select-icon" />
                        </view>
                        <u-select
                            v-if="item.type === 'select'"
                            v-model="item.show"
                            :title="item.title"
                            :list="item.list"
                            value-name="value"
                            label-name="name"
                            @confirm="selectConfirm($event, item)"
                        />
                        <!--类型为时间-->
                        <u-picker
                            v-else-if="item.type === 'time'"
                            v-model="item.show"
                            :params="item.params"
                            mode="time"
                            @confirm="selectTime($event, item)"
                        />
                    </view>

                    <!-- 多行文本框 -->
                    <view v-else-if="item.type == 'textarea'" class="textarea-box">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'">
                            <text v-if="item.rules.verify" class="colorRed"> * </text>
                            <text v-if="num" class="num"> {{ index + 1 }}. </text>
                            {{ item.label }}
                        </view>
                        <view class="line-bottom-textarea">
                            <textarea
                                v-model="item.rules.value"
                                rows=""
                                style="color: #a7a7a7; font-size: 28rpx"
                                auto-height
                                :maxlength="-1"
                                cols=""
                                placeholder-class="plaClass"
                                :disabled="item.disabled"
                                :placeholder="item.placeholder"
                                @input="inputVal(index)"
                            />
                        </view>
                    </view>
                    <!-- 上传图片 -->
                    <view v-else-if="item.type == 'file'" class="img-box pt30 flex-col-l">
                        <view class="font26" :class="item.rules.verify ? '' : 'p-l14 '">
                            <text v-if="item.rules.verify" class="colorRed"> * </text>
                            <text v-if="num" class="num"> {{ index + 1 }}. </text>
                            {{ item.label }}
                        </view>
                        <view class="img-upload p30">
                            <u-upload
                                :auto-upload="false"
                                :file-list="item.rules.fileList"
                                :disabled="item.disabled"
                                :accept="item.accept"
                                :capture="item.capture"
                                :max-count="item.maxCount"
                                :size-type="item.sizeType"
                                :compressed="item.compressed"
                                :camera="item.camera"
                                :multiple="item.multiple"
                                :max-size="item.maxSize"
                                :preview-image="item.previewImage"
                                width="150rpx"
                                height="150rpx"
                                @on-choose-complete="afterRead($event, item)"
                                @on-remove="deletePic($event, item)"
                            />
                        </view>
                    </view>

                    <!-- 单选框 -->
                    <view v-else-if="item.type === 'radio'" class="line-col">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'">
                            <text v-if="item.rules.verify" class="colorRed"> * </text>
                            <text v-if="num" class="num"> {{ index + 1 }}. </text>
                            {{ item.label }}
                            <text style="font-size: 20rpx; color: #9e9e9e; margin-left: 23rpx; width: 140rpx">
                                (单选)
                            </text>
                        </view>
                        <view class="line-bottom-select" :style="{ 'padding-left': num ? '60rpx' : '34rpx' }">
                            <u-radio-group
                                v-model="item.rules.value"
                                :current-index="index"
                                @change="radioChange($event, index)"
                            >
                                <u-radio
                                    v-for="(radioItem, radioIndex) in item.list"
                                    :key="radioIndex"
                                    icon-size="35"
                                    label-size="25"
                                    shape="circle"
                                    :name="radioItem.value"
                                    :disabled="radioItem.disabled"
                                >
                                    {{ radioItem.label }}
                                </u-radio>
                            </u-radio-group>
                        </view>
                    </view>
                    <!-- 多选框 -->
                    <view v-else-if="item.type == 'checkbox'" class="line-col">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'">
                            <text v-if="item.rules.verify" class="colorRed"> * </text>
                            <text v-if="num" class="num"> {{ index + 1 }}. </text>
                            {{ item.label }}
                            <text style="font-size: 20rpx; color: #9e9e9e; margin-left: 23rpx; width: 140rpx">
                                (多选)
                            </text>
                        </view>
                        <view class="line-bottom-select" :style="{ 'padding-left': num ? '60rpx' : '34rpx' }">
                            <u-checkbox-group @change="checkboxGroupChange($event, item)">
                                <u-checkbox
                                    v-for="(checkboxItem, checkboxIndex) in item.list"
                                    :key="checkboxIndex"
                                    v-model="item.list[checkboxIndex].checked"
                                    icon-size="35"
                                    label-size="25"
                                    :name="checkboxItem.value"
                                    :disabled="checkboxItem.disabled"
                                >
                                    {{ checkboxItem.name }}
                                </u-checkbox>
                            </u-checkbox-group>
                        </view>
                    </view>

                    <!-- 手机输入框 -->
                    <view v-else-if="item.type === 'mobile'" class="line">
                        <view :class="item.rules.verify ? 'line-left' : 'p-l14 line-left'">
                            <text v-if="item.rules.verify" class="colorRed"> * </text>
                            <text v-if="num" class="num"> {{ index + 1 }}. </text>
                            {{ item.label }}
                        </view>
                        <view class="line-right">
                            <input
                                v-model="item.rules.value"
                                type="number"
                                :placeholder="item.placeholder"
                                class="input"
                                :maxlength="11"
                                @input="inputVal(index)"
                            />
                            <u-button
                                v-if="item.oneKeyPhone"
                                size="mini"
                                type="primary"
                                open-type="getPhoneNumber"
                                :disabled="item.disabled"
                                @getphonenumber="getphonenumber"
                            >
                                一键获取
                            </u-button>
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
import mixins from "./mixins";

export default {
    name: "ActiveForm",
    mixins: [mixins],
    props: {
        //是否展示序号
        num: {
            type: Boolean,
            default: false
        },
        modelValue: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            submitData: "",
            selectBox: [],
            currentSelectIndex: "",
            currentSelectValue: "",
            codeFont: "获取验证码",
            wait: 60,
            isSend: false,
            sendColor: "color:#ff5b01"
        };
    },
    computed: {
        formData: {
            get() {
                // checkbox回显
                this.modelValue.forEach(item => {
                    if (item.type === "checkbox") {
                        item.list.forEach(item2 => {
                            item2.checked = item.rules.value.includes(item2.value);
                        });
                    }
                });
                console.log("this.formData", this.modelValue);
                return this.modelValue;
            },
            set(nval) {
                this.$emit("update:modelValue", nval);
            }
        }
    },
    methods: {
        //input输入框的值传给父组件
        inputVal(index) {
            const data = {
                val: this.formData[index].rules.value,
                index: index
            };
            if (String(data.val) != "" && String(data.index) != "") {
                this.formData[data.index].rules.value = data.val;
            }
            this.$emit("update:modelValue", this.formData);
        },

        // 单选 下拉框点击确定
        selectConfirm($event, item) {
            item.rules.label = $event[0].label;
            item.rules.value = $event[0].value;
            this.$emit("update:modelValue", this.formData);
            // console.log("this.formData", this.formData)
        },
        selectTime({ year, month, day, hour, minute, second }, item) {
            let date = "";
            if (year) {
                date += year + "-";
            }
            if (month) {
                date += month + "-";
            }
            if (day) {
                date += day;
            }
            if (hour) {
                date += " " + hour;
            }
            if (minute) {
                date += ":" + minute;
            }
            if (second) {
                date += ":" + second;
            }
            item.rules.value = date;
            item.rules.label = date;
            this.$emit("update:modelValue", this.formData);
            console.log("this.formData", this.formData);
        },
        //单选 点击触发
        radioChange($event, index) {
            this.$emit("update:modelValue", this.formData);
            console.log("this.formData", this.formData);
        },
        //复选框 点击触发
        checkboxGroupChange($event, item) {
            console.log("param; :>> ", $event, item);
            item.rules.value = $event;
            this.$emit("update:modelValue", this.formData);
        },
        // 删除图片
        deletePic($event, item) {
            item.rules.fileList.splice($event.index, 1);
            this.$emit("update:modelValue", this.formData);
            console.log("this.formData", this.formData);
        },
        // 新增图片
        afterRead($event, item) {
            // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
            console.log("$event, item", $event, item);
            item.rules.fileList = item.multiple ? $event : $event;
            this.$emit("update:modelValue", this.formData);
            console.log("this.formData", this.formData);
        },
        // 发送验证码
        sendCode(item) {
            let setTime = 0;
            this.sendCodeCallback(item);
            if (!this.isSend) {
                this.isSend = true;
                setTime = setInterval(() => {
                    this.wait--;

                    this.codeFont = this.wait + "重新发送";
                    if (this.wait === 0) {
                        clearInterval(setTime);
                        this.codeFont = "获取验证码";
                        this.isSend = false;
                        this.wait = 60;
                    }
                }, 1000);
            }
        },
        //校验
        $vervify() {
            return new Promise((resolve, reject) => {
                this.formData.forEach(item => {
                    if (item.rules.verify) {
                        switch (item.type) {
                            case "checkbox":
                                if (item.rules.value.length === 0) {
                                    uni.showToast({
                                        title: item.rules.errMess || "请选择" + item.label,
                                        duration: 2000,
                                        icon: "none"
                                    });

                                    reject(false);
                                    // throw Error(); //终止函数
                                }
                                break;
                            case "file":
                                if (item.rules.fileList.length === 0) {
                                    uni.showToast({
                                        title: item.rules.errMess || "请选择" + item.label,
                                        duration: 2000,
                                        icon: "none"
                                    });
                                    reject(false);
                                    // throw Error(); //终止函数
                                }
                                break;
                            case "mobile":
                                if (!item.rules.value) {
                                    uni.showToast({
                                        title: item.rules.errMess || "手机号不能为空",
                                        duration: 2000,
                                        icon: "none"
                                    });
                                    reject(false);
                                    // throw Error(); //终止函数
                                }
                                if (!/^\s{0}$|^1\d{10}$/.test(item.rules.value)) {
                                    uni.showToast({
                                        title: "手机格式错误",
                                        duration: 2000,
                                        icon: "none"
                                    });
                                    reject(false);
                                    // throw Error(); //终止函数
                                }
                                break;
                            default:
                                if ([null, undefined, ""].includes(item.rules.value)) {
                                    uni.showToast({
                                        title: item.rules.errMess || item.label + "不能为空",
                                        duration: 2000,
                                        icon: "none"
                                    });
                                    reject(false);
                                    // throw Error(); //终止函数
                                }
                                if (item.rules.regexp && !new RegExp(item.rules.regexp).test(item.rules.value)) {
                                    uni.showToast({
                                        title: item.label + "格式不正确",
                                        duration: 2000,
                                        icon: "none"
                                    });
                                    reject(false);
                                    // throw Error(); //终止函数
                                }
                                break;
                        }
                    }
                });
                resolve(this.$submitForm());
            });
        },
        // 提交序列化的表单
        $submitForm() {
            const formData = this.formData;
            let submitData = {};
            for (let i = 0; i < formData.length; i++) {
                if (formData[i].type === "file") {
                    submitData[formData[i].rules.name] = formData[i].rules.fileList;
                    break;
                }
                submitData[formData[i].rules.name] = formData[i].rules.value;
            }
            return submitData;
        }
    }
};
</script>

<style lang="scss" scoped>
// 弹框
.select-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 300000;

    .select-bg {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
    }

    .select-box {
        position: absolute;
        left: 0;
        bottom: -1000rpx;
        width: 100%;
        background: #fff;
        max-height: 50%;
        // height: 0%;
        overflow: auto;

        .select-title {
            display: flex;
            justify-content: space-between;
            height: 80rpx;
            background: #f5f5f5;
            line-height: 80rpx;
            padding: 0 30rpx;
        }

        .select-item {
            font-size: 28rpx;
            color: #333;
            border-bottom: 1px solid #eee;
            height: 75rpx;
            line-height: 75rpx;
            padding: 0 30rpx;

            i {
                display: block;
                float: right;
                border-bottom: 4rpx solid #1ca032;
                border-right: 4rpx solid #1ca032;
                width: 12rpx;
                height: 26rpx;
                transform: rotate(45deg);
                margin-top: 24.5rpx;
            }
        }
    }
}

// 下拉icon
.select-icon {
    float: right;
    border-bottom: 2rpx solid #999;
    border-right: 2rpx solid #999;
    width: 16rpx;
    height: 16rpx;
    transform: rotate(-45deg);
    margin-right: 30rpx;
}

.color-999 {
    color: #999;
}

.plaClass {
    text-align: right;

    font-size: 26rpx;
}

.form-container {
    .form-box {
        width: 100%;
        box-sizing: border-box;
    }

    .colorRed {
        color: red;
        padding: 0 10rpx;
    }

    .line-right {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }

    .line-bottom-select {
        padding-top: 40rpx;
    }

    .line-bottom-textarea {
        padding-top: 20rpx;

        textarea {
            min-height: 100rpx;
        }
    }

    .line-left {
        display: flex;
        min-width: 22%;
        align-items: center;
        height: 100%;
        letter-spacing: 0.5px;
        font-size: 26rpx;
        // font-weight: 550;
        color: #000000;
        box-sizing: border-box;
    }

    .p-l14 {
        padding-left: 34rpx;
    }

    .textarea-box {
        // display: flex;
        width: 100%;
        border-bottom: 1px solid #ededed;
        padding-top: 20rpx;
        // align-items: center;
        textarea {
            padding-left: 32rpx;
            height: 100rpx;
            font-size: 25rpx;
            color: #333;
        }
    }

    .line {
        padding: 27rpx 0;
        // min-height: 100rpx;
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        border-bottom: 1px solid #ededed;
        overflow: hidden;

        .input {
            padding-right: 20rpx;
            padding-left: 20rpx;
            height: 100%;
            width: 100%;
            text-align: left;
            font-size: 28rpx;
            color: #333;
            border: none;
            overflow: hidden;
            text-overflow: ellipsis;
            outline: none;
        }
    }

    .line-col {
        padding: 27rpx 0;
        // min-height: 100rpx;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        border-bottom: 1px solid #ededed;
        overflow: hidden;

        .input {
            padding-right: 20rpx;
            height: 100%;
            width: 100%;
            text-align: left;
            font-size: 28rpx;
            color: #333;
            border: none;
            overflow: hidden;
            text-overflow: ellipsis;
            outline: none;
        }
    }

    .num {
        margin-right: 8rpx;
    }
}
</style>
